{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>User Center</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'css/button.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/footer.css' %}">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="{% static 'js/button.js' %}"></script>

</head>


<body>

<!-- 导航栏 -->
<div class="container" style="margin-top:15px">


    <nav class="navbar navbar-expand-sm bg-secondary navbar-light">
        <a class="navbar-brand" href="{% url 'article:index' %}">IBLOG</a>
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="{% url 'bloguser:user_center' %}">个人中心</a>
            </li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>


        <!-- 这个 div 加上 justify-content-end 样式即可 -->
        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
            <ul class="navbar-nav" id="headerNav">
                <li class="nav-item" id="navMainPage"><a class="nav-link" href="{% url 'article:index' %}"> 返回首页 </a></li>
                <li class="nav-item" id="navMainPage"><a class="nav-link" href="{% url 'bloguser:user_logout' %}">退出</a></li>
                <li class="nav-item" id="navMainPage"><a class="nav-link" href="#"></a></li>

            </ul>
        </div>
    </nav>
</div>

<div class="container " style="margin-top:15px">

    <div class="row" style="margin-top:10px">
        <div class="col-sm-4">
            <!-- {% if profile.avatar %} -->
                <img src="pictures/hanfei.jpg" style="max-width: 30%; border-radius: 15%;" class="col-md-4">
                <!-- {% else %} -->
                <!-- <h5 class="col-md-4">暂无头像</h5> -->
                <!-- {% endif %} -->
            <form enctype="multipart/form-data">
                <!-- avatar -->
                <div class="form-group">
                    <label for="avatar">更换头像</label>
                    <input type="file" class="form-control-file" name="avatar" id="avatar">
                </div>
            </form>
            <br>

            用户名： 赵向阳
            <form>
                性别：
                <label class="radio-inline"><input type="radio" name="optradio">男</label>
                <label class="radio-inline"><input type="radio" name="optradio">女</label>
            </form>
            <form method="post" action="#">
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" class="form-control" id="phone" name="phone" value="1008611">
                </div>
                <div class="form-group">
                    <label for="bio">简介</label>
                    <textarea type="text" class="form-control" id="bio" name="bio" rows="9"></textarea>
                </div>
                <!-- 提交按钮 -->
                <div class="form-group">
                    <button type="submit" class="btn btn-primary ">提交</button>
                </div>
            </form>
        </div>
        <hr>

        <div class="col-sm-8">
            <h2>我与博客的爱恨情仇</h2>
            <hr>
            <h5>我2020年9月29日来到这里</h5>
            <h5>我发表的博客数量：35篇 <a href="{% url 'article:my_articles' %}">管理我的博客</a></h5>
            <h5>我的博客曾被观看：5678次</h5>
            <h5>我热度最高的博客是：《演员的自我修养》被别人看过888次</h5>
            <h5>我的其他热门文章：</h5>
            <a href="article_detail.html">《滕王阁序》</a> 、
            <a href="article_datail copy.html">《岳阳楼记》</a> 、
            《春江花朝秋月夜》
            <hr>


        </div>
        <!-- row的div -->
    </div>


</div>
</body>

<footer id="footer">
    <div class="container">
        <hr style="margin: 0;">
    </div>
    <nav class="navbar navbar-light mb-0" id="nav-footer" style="background-color: white">

        <div class="row col-12 justify-content-center font-size-xs">
            <div style="text-align: center; color: black;">
                <div class="mb-0">
                    <div id="show_time0">
                        <script>
                            setInterval("show_time0.innerHTML='CopyRight © 2019 ~'+new Date().getFullYear();", 1000);
                        </script>
                    </div>
                    ZXY iblog
                </div>
                <p class="mb-0">Powered by
                    <span class="mb-0">&nbsp;<a href="https://beian.miit.gov.cn/">豫ICP备20007445号</a></span>
                </p>
            </div>
        </div>
        </div>
    </nav>
</footer>

</body>

</html>